<template>
	<view>
		<view class="content">
			<u-navbar title-color="#fff" back-icon-color="#ffffff" :is-fixed="true" :is-back="false"
				:background="background" :back-text-style="{color: '#fff'}" :title="title" />

		</view>
		<view class="tab">
			<u-subsection :list="tabs" @change="changTab" active-color="#23222C"	 :current="currentTabIndex" mode="subsection" bg-color="#23222C" button-color="#eeeeee"></u-subsection>
		</view>

		<swiper  style="height: 82vh;" :current="currentTabIndex" @click="isLogin">
			<swiper-item>
				<view class="swiper-item">
					<view v-if="select==1">
						<pick-up-goods></pick-up-goods>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="search">
						<u-search @custom="search" @search="search" placeholder="请输入目的地" v-model="address"></u-search>
					</view>
					<scroll-view scroll-y="true"  class="scroll">
							
						<view>
							<car-list :item="item" v-for="(item,index) in publish"></car-list>
						</view>
						
						<view class="" style="height: 100rpx;">
							
						</view>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
	
	</view>
</template>


<script>
	import carList from './component/carList/carList.vue'
	import pickUpGoods from './component/pickUpGoods/pickUpGoods.vue'
	import {getOrderPublishPage} from '../../api/user/user.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				address:'',
				src: 'https://img0.baidu.com/it/u=1986451467,394304688&fm=26&fmt=auto&gp=0.jpg',
				title: '同城物流',
				select: 1,
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				publish:[],
				page:1,
				tabs: [{
						name: '拉货'
					},
					{
						name: '找单'
					}
				],
				currentTabIndex: 0,
				list: [{
					id: 1,
					name: '拉货'
				}, {
					id: 2,
					name: '找单'
				}, ],
				current: 0,
				old:[]
			}
			
		},
		onLoad() {
			this.getOrderPublishPage()	

		},
	computed:{
		...mapGetters([
			'userID',
		])
	},
		components: {
			pickUpGoods,
			carList
			// findGoodOrder,
		},
		methods: {
			isLogin(){
				if(this.userID==null || this.userID==''){
					uni.showToast({
						icon: 'error',
						title: '尚未登录，请登录',
						duration: 2000});
					return;
				}
			},
			getOrderPublishPage(){
			
				getOrderPublishPage(
				{page:this.page,
					limit:10}
				).then(res=>{
					console.log(res)
					this.publish=res.body.list
					this.old=res.body.list
					this.page++
				}).catch(err=>{
					console.log(err);
				})
			},
			changTab(e){
				this.currentTabIndex=e
			},
			search(e){
				if (e=='') {
				this.publish=	this.$u.deepClone(this.old)
					return
				}
				this.publish=[]
				this.old.forEach((item,index)=>{
					if (item.orderTitle.indexOf(this.address)!=-1) {
						this.publish.push(item)
					}
				})
				console.log(e);
			},
		},
	}
</script>

<style>
	.search{
		margin: 20rpx 0;
	}
	.scroll{
		height: calc(100vh - 70rpx);
		
	}
	.swiper-item{
		padding: 0 20rpx;
		height: 100vh;
	}
	.tab{
		
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f5f5f5;
		width: 100%;
		height: 100%;
		padding: 0 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.selector_way {
		height: auto;
		width: 100%;
		background-color: #18B566;

	}

	.button_hover:hover {
		background-color: #DD6161;
	}

	.cars {
		width: 100%;
		position: relative;

	}

	.cars_info {
		width: 80%;
		height: auto;
		float: left;
	}

	.drop_cars_info {
		text-align: center;
		width: 20%;
		float: left;
	}

	.container {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.left_car_pic {
		width: 60%;
		height: 300rpx;
		background-color: #ffffff;
	}

	.right_car_info {
		width: 40%;
		height: 300rpx;
	}

	.detail {
		text-align: center;
		font-weight: bold;
		color: #82848A;
		margin-top: 30rpx;
	}
</style>
